<template>
	<view class="content">
	  <u-tabs :list="list1" @click="click"></u-tabs>
  
	  <view class="order" v-for="item in orderlist" :key="item.id" @click="todetail(item.id)">
		<view class="top">
		  <view class="left">
			<view>
			  <u-icon name="home" :size="20" color="rgb(94,94,94)"></u-icon>
			</view>
			<view class="title">{{item.store_text}}</view>
			<view style="padding-left: 10px">
			  <u-icon
				name="arrow-right"
				:size="18"
				color="rgb(94,94,94)"
			  ></u-icon>
			</view>
		  </view>
		  <view class="right">
			<view class="rtitle">{{item.flag}}</view>
		  </view>
		</view>
		<view class="main">
		  <view class="box">
			<view class="left">
			  <u-image
				:showLoading="true"
				:src="item.image"
				width="90px"
				height="90px"
			  ></u-image>
			</view>
			<view class="center">
			  <view class="title">
				{{ item.goodsname }}
			  </view>
			  <view class="prop">
				<span>订单号:</span>
				<span>{{ item.code }}</span>
			  </view>
			  <view class="createtime">
				<span>下单时间</span>
				<span>{{ item.createtime }}</span>
			  </view>
			</view>
			<view class="right">
			  <view class="price"> ￥{{ item.price }} </view>
			  <view class="num"> x{{ item.num }}</view>
			</view>
		  </view>
		  <view class="count">
			<view>共{{item.num}}件商品，合计: <span>￥ {{item.count}}</span></view>
		  </view>
		  <view class="button">
			<view class="btn" v-if="item.status==1">
			  <u-button
				type="primary "
				size="small"
				:plain="true"
				text="待付款"
			  ></u-button>
			</view>
			<view class="btn"  v-if="item.status==2">
			  <u-button
				type="primary"
				size="small"
				:plain="true"
				text="待发货"
			  ></u-button>
			</view>
			<view class="btn" >
			  <u-button
				type="info"
				size="small"
				:plain="true"
				text="查看物流"
			  ></u-button>
			</view>
			<view class="btn">
			  <u-button
				type="warning"
				size="small"
				text="确认收货"
			  ></u-button>
			</view>
		  </view>
		</view>
	  </view>
	</view>
  </template>
  
  <script>
  export default {
	onLoad()
	{
		this.businessinfo = this.$u.business.check()

		this.getorderlist()
	},
	data() {
	  return {
		businessinfo: {},
		orderlist:[],
		
		// orderList: [
		// 	{
		// 		id:1,
		// 		name:"福特过热热火给哦热如果窘况如果累了就发均为克里夫胃口了开票金额发",
		// 		flag:"交易成功",
		// 		createtime:"2023-12-1",
		// 		store_text:"拱北三星店",
		// 		image:'https://cdn.uviewui.com/uview/album/1.jpg',
		// 		code:"20231217123234454",
		// 		count:12890.00,
		// 		num:12,
		// 		price:299,
		// 	},
		// 	{	
		// 		id:2,
		// 		name:"福特过热热火给哦热如果窘况如果累了就发均为克里夫胃口了开票金额发",
		// 		flag:"交易成功",
		// 		createtime:"2023-12-1",
		// 		store_text:"拱北三星店",
		// 		image:'https://cdn.uviewui.com/uview/album/1.jpg',
		// 		code:"20231217123234454",
		// 		count:12890.00,
		// 		num:12,
		// 		price:299,
		// 	},
		// 	{
		// 		id:3,
		// 		name:"福特过热热火给哦热如果窘况如果累了就发均为克里夫胃口了开票金额发",
		// 		flag:"交易成功",
		// 		createtime:"2023-12-1",
		// 		store_text:"拱北三星店",
		// 		image:'https://cdn.uviewui.com/uview/album/1.jpg',
		// 		code:"20231217123234454",
		// 		count:12890.00,
		// 		num:12,
		// 		price:299,
		// 	},
		// 	{
		// 		id:4,
		// 		name:"福特过热热火给哦热如果窘况如果累了就发均为克里夫胃口了开票金额发",
		// 		flag:"交易成功",
		// 		createtime:"2023-12-1",
		// 		store_text:"拱北三星店",
		// 		image:'https://cdn.uviewui.com/uview/album/1.jpg',
		// 		code:"20231217123234454",
		// 		count:12890.00,
		// 		num:12,
		// 		price:299,
		// 	},
		// 	{
		// 		id:5,
		// 		name:"福特过热热火给哦热如果窘况如果累了就发均为克里夫胃口了开票金额发",
		// 		flag:"交易成功",
		// 		createtime:"2023-12-1",
		// 		store_text:"拱北三星店",
		// 		image:'https://cdn.uviewui.com/uview/album/1.jpg',
		// 		code:"20231217123234454",
		// 		count:12890.00,
		// 		num:12,
		// 		price:299,
		// 	},
		// 	{
		// 		id:6,
		// 		name:"福特过热热火给哦热如果窘况如果累了就发均为克里夫胃口了开票金额发",
		// 		flag:"交易成功",
		// 		createtime:"2023-12-1",
		// 		store_text:"拱北三星店",
		// 		image:'https://cdn.uviewui.com/uview/album/1.jpg',
		// 		code:"20231217123234454",
		// 		count:12890.00,
		// 		num:12,
		// 		price:299,
		// 	},
		// ],
		list1: [
		  {
			name: "全部",
			status: 0,
		  },
		  {
			name: "待付款",
			status: 1,
		  },
		  {
			name: "待发货",
			status: 2,
		  },
		  {
			name: "待收货",
			status: 3,
		  },
		  {
			name: "退款/售后",
			status: 4,
		  },
		  {
			name: "待评价",
			status: 5,
		  }
		  
		],
	  };
	},
  
	methods: {

			// 订单详情
			todetail(e)
			{

				uni.$u.route({
					url:"pagesC/order/record",
					params:{
						orderid:e
					}
				})
			},

		async getorderlist()
		{
			let data = {
				busid:this.businessinfo.id
			}

			let result = await this.$u.api.order.index(data)
			if(result.code)
			{
				this.orderlist = result.data

			}
		}
	
	},
  };
  </script>
  
  <style lang="scss">
  .content {
	.order {
	  margin:56px auto;
	  background-color: #ffffff;
	  height: 330rpx;
	  width: 90%;
	  border-radius: 30rpx;
	  // border: 1rpx solid;
  
	  .top {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;
		.title {
		  font-size: 13px;
		  padding-left: 10px;
		  font-weight: 700;
		}
		.left{
		  display: flex;
  
		}
	  }
  
	  .right {
		.rtitle {
		  font-size: 12px;
		  color: #f60;
		  padding-right: 15px;
		}
	  }
  
	  .main {
		width: 100%;
  
		.box {
		  flex-direction: row;
		  width: 100%;
		  display: flex;
		  justify-content: space-between;
		  padding: 15rpx;
		}
		
		  .center {
			.title {
			  // white-space: nowrap;
			  overflow: hidden;
			  color: #484646;
  
			  padding-left: 12px;
			  text-overflow: ellipsis;
			  font-size: 13px;
			  width: 195px;
			}
  
			.prop {
			  color: #888888;
			  padding:5px 12px;
  
			  font-size: 12px;
			}
			.createtime {
			  padding:5px 12px;
			  font-size: 13px;
  
			  color: #888888;
			}
		  }
		  .right {
			position: relative;
			.price {
			  font-size: 13px;
			  padding: 5px;
			}
			.num {
			  position: absolute;
			  font-size: 10px;
			  left: 20px;
			  color: #888888;
			}
		  }
		  .count{
			  text-align: right;
			  font-size: 12px;
			  color: #4c4a4a;
			  span{
				  font-size: 14px;
			  }
		  }
		  .button{
			  width: 99%;
			  margin:20px auto;
			  display: flex;
			  justify-content: flex-end;
			  
			  .btn{
				  margin-left: 10px;
				  width: 73px;
				  color: #4c4a4a;
				  height: 35px;
				  
  
			  }
		  }
		}
	  
	}
  }
  </style>
  